<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'header.php' ?>
<style type="text/css">
.dropdown-add-student {
	margin-bottom: 10px;
}
.dropdown-add-student .ul-grade {
	margin-left: 20px;
}
.dropdown-add-student .btn-primary a{
	line-height: 25px;
	color: #FFF;
}
</style>
<div class="page-header">
	<h1 style="font-size: 20px;">
        <a class="a-back" href="<?= admin_url('contents/exam_room_detail_data/' . $roomId) ?>">
            <i class="fa fa-reply"></i>
        </a>
		考场编号&nbsp;&nbsp;<?= $detailId ?>

    </h1>
</div>

<div class="col-xs-12">
	<!-- 同步学校不可添加数据 -->
	<?php if(! $rmxSchool['school_from']): ?>
		<div class="dropdown col-xs-12 dropdown-add-student">
			<div class="btn btn-info btn-dropdown"  data-toggle="dropdown">
					<i class="ace-icon fa fa-plus"></i> 添加考生
			</div>
			<ul class="dropdown-menu btn-primary ul-grade">
				<?php foreach($grades as $grade): ?>
					<li>
						<a href="#modal-student" data-toggle="modal" onclick="show_input(<?= $grade['id'] ?>)"><?= $grade['grade_name'] ?></a>
					</li>
				<?php endforeach ?>
			</ul>
		</div>
	<?php endif ?>
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
                <th>座位</th>
                <th>姓名</th>
                <th>行政班</th>
				<th>准考证号</th>
				<!-- 同步学校不可修改或删除数据 -->
				<?php if(! $rmxSchool['school_from']): ?>
					<th>操作</th>
				<?php endif ?>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<!-- 新增考生弹窗 -->
<div id="modal-student" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button> <span id="school-name"></span>
					选择考生
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="student-form">
							<input type="hidden" name="id" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">学生名称：</label>
								<div class="col-sm-6">
									<?php foreach($grades as $grade): ?>
										<input class="form-control" id="select-student-<?= $grade['id'] ?>" type="text" name="student_name" placeholder="请选择<?= $grade['grade_name'] ?>的学生" />
									<?php endforeach ?>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">准考证号：</label>
								<div class="col-sm-6">
									<input class="form-control"  type="text" name="student-ticket" placeholder="请填写第一个学生的，后面依次递增" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-student">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<!-- 修改考生弹窗 -->
<div id="modal-edit-student" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button> <span id="school-name"></span>
					修改考生信息
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10">
							<input type="hidden" name="edit-id" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">学生名称：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="edit-student-name" disabled />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">座位号：</label>
								<div class="col-sm-6">
									<input class="form-control" type="number" name="edit-student-seatno" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">准考证号：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="edit-student-ticket" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="edit-student">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	var table = "";
	$(function(){
		// 考生列表
		table = $('#dynamic-table').dt({
			"ajaxUrl": '<?= admin_url('contents/get_exam_room_detail_student_list?detail_id=' . $detailId)?>',
			"columns": [
				{"data": function(ret){
	            	return ret.seatNO;
				}},	
				{"data": function(ret){
	            	return ret.name;
				}},	
				{"data": function(ret){
	            	return ret.class_name;
				}},
				{"data": function(ret){
	            	return ret.studentTicket;
				}},
				// 同步学校不可修改或删除数据
				<?php if(! $rmxSchool['school_from']): ?>
					{"data": function(ret){
						var action = '';
						action += '<a href="#modal-edit-student" data-toggle="modal" class="edit-student mr10 text-success" data-id="' + ret.userID + '" data-name="' + ret.name + '" data-seatno="' + ret.seatNO + '" data-ticket="' + ret.studentTicket + '"></i> 编辑</a>&nbsp;&nbsp;';
						action += '<a href="javascript:" class="delete-student text-danger" data-id="' + ret.userID + '" data-name="' + ret.name + '"><i class="fa fa-times"></i> 删除</a>';
						return action;
					}}
				<?php endif ?>
			]
		});

		// 初始化选择学生控件
		<?php foreach($grades as $grade): ?>
			$("#select-student-<?= $grade['id'] ?>").selectStudent({
				"modalDataUrl": '<?= admin_url('contents/select_student_plugin_data_source') . '?grade_id=' . $grade['id'] ?>',
				"multiSelect": true,
				"resultDom": $("[name=id]")
			});
		<?php endforeach ?>

		// 提交表单
		$('#save-student').click(function() {
			var submitUrl = "<?=admin_url('contents/save_exam_student_action')?>";
			// 考场id
			var detialId = <?= $detailId ?>;
			// 学生id
			var ids = $('[name=id]').val();
			// 准考证号
			var ticket = $('[name=student-ticket]').val();
			ajax_post(submitUrl, { detail_id: detialId, id: ids, ticket: ticket }, function(){
				// 刷新页面
				location.reload();
			});
		});

		// 修改某个考生信息
		$("body").on("click", ".edit-student", function(){
			var detialId = <?= $detailId ?>;
			var id = $(this).data("id");
			var name = $(this).data("name");
			var seatNO = $(this).data("seatno");
			var ticket = $(this).data("ticket")

			$('[name=edit-id]').val(id);
			$('[name=edit-student-name]').val(name);
			$('[name=edit-student-seatno]').val(seatNO);
			$('[name=edit-student-ticket]').val(ticket);
		})

		// 提交修改考生信息
		$('#edit-student').click(function() {
			var submitUrl = "<?=admin_url('contents/edit_exam_student_action')?>";
			// 考场id
			var detialId = <?= $detailId ?>;
			// 学生id
			var id = $('[name=edit-id]').val();
			// 座位号
			var seatNO = $('[name=edit-student-seatno]').val();			
			// 准考证号
			var ticket = $('[name=edit-student-ticket]').val();
			ajax_post(submitUrl, { 
				detail_id: detialId,
				id: id,
				seat_no: seatNO,
				ticket: ticket
			}, function(){
				// 刷新页面
				location.reload();
			});
		});

		// 删除某个考生
		$("body").on("click", ".delete-student", function(){
			var detialId = <?= $detailId ?>;
			var id = $(this).data("id");
			var name = $(this).data("name");
			layer.confirm('确定删除学生：' + name + '吗？', function(){
				// 提交数据
				var postUrl = "<?=admin_url('contents/delete_exam_student_action')?>";
				var postData = { detail_id: detialId, id: id };
				ajax_post(postUrl, postData, function(res){
					// 刷新页面
					location.reload();
				})
			});
		})

		setTimeout(() => {
			if($("td.dataTables_empty").length === 0) {
				var count = $('#dynamic-table tbody tr').length;
				var countHtml = '&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;' + count + '&nbsp;条结果'
				$('#dynamic-table_info').html(countHtml);
				$('#dynamic-table_paginate').html('');
			}
		}, 400);
	})
	function show_input(id){
		$('#select-student-' + id).show();
		$('#select-student-' + id).siblings().hide();
	}
</script>